<template>
	<div>
		<navigationBar :backType="2" navigationTitle="订单" />

		<orderTab :status.sync="status" :userStatus="2" @onRefresh="onRefresh" />

		<view class="wrap paddingBottom">
			<orderList :list="list" :userStatus="2" @onRefresh="onRefresh"></orderList>
		</view>
	</div>
</template>

<script>
	import { serviceOrderList } from "@/API/order.js";
	import orderTab from "@/components/order/order_status_tab.vue";
	import orderList from "@/components/order/orderList.vue";
	export default {
		components: {
			orderTab,
			orderList,
		},
		data() {
			return {
				status: "", //订单状态

				page: 1,
				total: 0,
				list: [],
			};
		},
		onLoad(options) {
			this.status = options.status.toString() || "2";
		},
		onShow() {
			this.onRefresh();
		},
		onPullDownRefresh() {
			this.onRefresh();
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++;
				this.getData();
			}
		},
		methods: {
			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1;
				this.list = [];
				this.getData();
			},
			/**
			 * 网络请求
			 */
			getData() {
				serviceOrderList(this.status, this.page).then((res) => {
					const list = res.data.data;
					this.total = res.data.total;

					if (this.page === 1) {
						this.list = list;
					} else {
						this.list = this.list.concat(list);
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap {
		--bottom-height: 120rpx;
	}
</style>
